
import { Canvas } from '@antv/g-canvas';
import './hello';

// 或者使用 SVG 版本
// import { Canvas } from '@antv/g-svg';

  
const canvas = new Canvas({
    container: 'c1',
    width: 1200,
    height: 800,
  });
// 增加圆形  
  const group = canvas.addGroup();
  const circle = group.addShape('circle', {
    attrs: {
      x: 100,
      y: 100,
      r: 50,
      fill: 'red',
      stroke: 'blue',
      lineWidth: 5,
    },
  });

  
circle.on('mouseenter', () => {
    circle.attr('fill', '#2FC25B');
  });
  
  circle.on('mouseleave', () => {
    circle.attr('fill', '#1890FF');
  });

  // 增加椭圆形
canvas.addShape('ellipse', {
    attrs: {
      x: 300,
      y: 200,
      rx: 100,
      ry: 150,
      fill: '#1890FF',
      stroke: '#F04864',
      lineWidth: 4,
      radius: 8,
    },
  });
  

  // 增加方形
  
canvas.addShape('rect', {
    attrs: {
      x: 100,
      y: 150,
      width: 30,
      height: 20,
      fill: '#1890FF',
      stroke: '#F04864',
      lineWidth: 4,
      radius: 8,
    },
  });
  
  // 增加三条直线

  
canvas.addShape('line', {
    attrs: {
      x1: 120,
      y1: 200,
      x2: 150,
      y2: 200,
      stroke: '#1890FF',
      lineWidth: 2,
    },
  });
  
  canvas.addShape('line', {
    attrs: {
      x1: 120,
      y1: 300,
      x2: 150,
      y2: 300,
      lineWidth: 2,
      lineDash: [10, 10],
      stroke: '#F04864',
    },
  });
  
  canvas.addShape('line', {
    attrs: {
      x1: 120,
      y1: 400,
      x2: 190,
      y2: 400,
      lineWidth: 2,
      stroke: 'l(0) 0:#F04864 0.5:#7EC2F3 1:#1890FF',
    },
  });


  // 增加折线 
  
canvas.addShape('polyline', {
    attrs: {
      points: [
        [50, 50],
        [100, 50],
        [100, 100],
        [150, 100],
        [150, 150],
        [200, 150],
        [200, 200],
        [250, 200],
        [250, 250],
        [300, 250],
        [300, 300],
        [350, 300],
        [350, 350],
        [400, 350],
        [400, 400],
        [450, 400],
      ],
      stroke: 'red',
      lineWidth: 2,
    },
  });
  // 增加多边形
  
const polygon =canvas.addShape('polygon', {
    attrs: {
      points: [
        [200, 100],
        [400, 100],
        [400 + 200 * Math.sin(Math.PI / 6), 100 + 200 * Math.cos(Math.PI / 6)],
        [400, 100 + 200 * Math.cos(Math.PI / 6) * 2],
        [200, 100 + 200 * Math.cos(Math.PI / 6) * 2],
        [200 - 200 * Math.sin(Math.PI / 6), 100 + 200 * Math.cos(Math.PI / 6)],
      ],
      stroke: '#1890FF',
      lineWidth: 2,
    },
  });
  
  // 增加路径
  
canvas.addShape('path', {
    attrs: {
      path: [
        ['M', 100, 100],
        ['L', 200, 200],
      ],
      startArrow: {
        path: 'M 10,0 L -10,-10 L -10,10 Z',
        d: 10,
      },
      stroke: '#F04864',
    },
  });
  
  const path163 = canvas.addShape('path', {
    attrs: {
      path:
        'M 100,300' +
        'l 50,-25' +
        'a25,25 -30 0,1 50,-25' +
        'l 50,-25' +
        'a25,50 -30 0,1 50,-25' +
        'l 50,-25' +
        'a25,75 -30 0,1 50,-25' +
        'l 50,-25' +
        'a25,100 -30 0,1 50,-25' +
        'l 50,-25' +
        'l 0, 200,' +
        'z',
      lineWidth: 10,
      lineJoin: 'round',
      stroke: '#54BECC',
    },
  });

  
const circle185 = canvas.addShape('circle', {
    attrs: {
      x: 100,
      y: 300,
      r: 20,
      fill: '#F04864',
    },
  });
  
  circle185.animate((ratio) => path163.getPoint(ratio), {
    duration: 10000,
    repeat: true,
  });
  
  // 增加几何图形,绘制版本

  
const commonAttrs = {
  r: 30,
  lineWidth: 2,
  stroke: '#F04864',
  fill: '#1890FF',
};

canvas.addShape('marker', {
  attrs: {
    ...commonAttrs,
    x: 100,
    y: 800,
    symbol: 'circle',
  },
});

canvas.addShape('marker', {
  attrs: {
    ...commonAttrs,
    x: 200,
    y: 800,
    symbol: 'square',
  },
});

canvas.addShape('marker', {
  attrs: {
    ...commonAttrs,
    x: 300,
    y: 800,
    symbol: 'diamond',
  },
});

canvas.addShape('marker', {
  attrs: {
    ...commonAttrs,
    x: 400,
    y: 800,
    symbol: 'triangle',
  },
});

canvas.addShape('marker', {
  attrs: {
    ...commonAttrs,
    x: 500,
    y: 800,
    symbol: 'triangle-down',
  },
});

// 增加图片

canvas.addShape('image', {
    attrs: {
      x: 700,
      y: 100,
      width: 200,
      height: 200,
      img: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',
    },
  });

  // event bubbles from shape to group
group.on('mouseenter', () => {
    polygon.attr('fill', 'aqua');
  });

  
circle.animate(onFrame, {
    duration: 2000,
    repeat: true,
  });
  window.a = 100;
  function onFrame(ratio) {
      console.log('a',a);
    return {
      x: 100 + (500 - 200) * ratio,
      y: 100 + (400 - 100) * ratio,
      r: 20 + (a - 20) * ratio,
    };
  }

  
const circle1 = canvas.addShape('circle', {
    attrs: {
      x: 200,
      y: 200,
      r: 100,
      lineWidth: 4,
      stroke: '#1890FF',
    },
  });
  // 卫星旋转
  const circle2 = canvas.addShape('circle', {
    attrs: {
      x: 100,
      y: 200,
      r: 20,
      fill: '#F04864',
    },
  });
  
  let cx = 200;
  let cy = 200;
  
  circle1.animate(onFrame1, {
    duration: 2000,
    repeat: true,
  });
  
  circle2.animate(onFrame2, {
    duration: 2000,
    repeat: true,
  });
  
  function onFrame1(ratio) {
    const x = 200 + (400 - 200) * ratio;
    const y = 200 + (400 - 200) * ratio;
    cx = x;
    cy = y;
    return {
      x,
      y,
    };
  }
  
  function onFrame2(ratio) {
    return {
      x: cx + 100 * Math.cos(ratio * Math.PI * 2),
      y: cy + 100 * Math.sin(ratio * Math.PI * 2),
    };
  }
  

  // 多个卫星

  
canvas.addShape('circle', {
    attrs: {
      x: 800,
      y: 200,
      r: 50,
      fill: '#1890FF',
    },
  });
  
  const circleList = [];
  
  for (let i = 0; i < 6; i++) {
    const circle = canvas.addShape('circle', {
      attrs: {
        x: 800 + 100 * Math.cos((i / 6) * Math.PI * 2),
        y: 200 + 100 * Math.sin((i / 6) * Math.PI * 2),
        r: 20,
        fill: '#F04864',
      },
    });
    circleList.push(circle);
  }
  
  circleList.forEach((circle, i) => {
    circle.animate(
      (ratio) => {
        return {
          x: 800 + 100 * Math.cos(ratio * Math.PI * 2 + (i / 6) * Math.PI * 2),
          y: 200 + 100 * Math.sin(ratio * Math.PI * 2 + (i / 6) * Math.PI * 2),
        };
      },
      {
        duration: 3000,
        repeat: true,
      }
    );
  });